<template>
  <view class="progress-edit-container">
    <u-navbar
      title="新增跟进记录"
      :border-bottom="true"
      back-icon-color="#007aff"
      back-text="返回"
      :back-text-style="{color: '#007aff'}"
    ></u-navbar>

    <view class="form-container">
      <view class="form-title">{{ expansionInfo.productName }}</view>

      <view class="form-item">
        <view class="item-label required">目前跟进情况</view>
        <view
          class="content-tips"
        >* 支持按日期记录更新内容，例如：8月7日，拜访客户单位***，沟通了**产品的报价及设计方案，**意向8月份建设，对我公司该项产品的意见为......</view>
        <u-field
          v-model="content"
          type="textarea"
          placeholder="请输入跟进情况"
          height="200"
          :border-bottom="false"
          :maxlength="-1"
        ></u-field>
      </view>

      <view class="button-group">
        <u-button type="primary" @click="saveProgress">保存</u-button>
        <u-button type="default" @click="goBack">取消</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupId: "",
      expansionId: "",
      expansionInfo: {},
      content: ""
    };
  },
  onLoad(options) {
    if (options.groupId && options.expansionId) {
      this.groupId = options.groupId;
      this.expansionId = options.expansionId;
      this.getExpansionInfo();
    } else {
      uni.showToast({
        title: "参数错误",
        icon: "none"
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    // 获取拓展项基本信息
    getExpansionInfo() {
      // 这里应该调用接口获取数据
      // 模拟数据
      if (this.expansionId === "1") {
        this.expansionInfo = {
          id: "1",
          category: "line",
          categoryName: "专线",
          productName: "互联网专线",
          status: "progress"
        };
      } else if (this.expansionId === "2") {
        this.expansionInfo = {
          id: "2",
          category: "cloud",
          categoryName: "移动云",
          productName: "云主机类",
          status: "completed"
        };
      }

      // 检查是否已落地或废弃，不允许新增跟进
      if (
        this.expansionInfo.status === "completed" ||
        this.expansionInfo.status === "abandoned"
      ) {
        uni.showModal({
          title: "提示",
          content: "当前商机已落地或已废弃，不能新增跟进记录",
          showCancel: false,
          success: () => {
            uni.navigateBack();
          }
        });
      }
    },

    // 保存跟进记录
    saveProgress() {
      // 验证输入
      if (!this.content.trim()) {
        uni.showToast({
          title: "请输入跟进情况",
          icon: "none"
        });
        return;
      }

      // 保存数据
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");

      const createTime = `${year}-${month}-${day} ${hours}:${minutes}`;

      const progressData = {
        expansionId: this.expansionId,
        createTime,
        content: this.content,
        creator: "当前用户" // 实际应从登录信息中获取
      };

      // 模拟保存过程
      uni.showLoading({
        title: "保存中..."
      });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "新增成功",
          icon: "success"
        });

        // 返回上一页
        setTimeout(() => {
          this.goBack();
        }, 1500);
      }, 1000);
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
.progress-edit-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30px;
}

.form-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.form-item {
  margin-bottom: 20px;
}

.item-label {
  font-size: 15px;
  color: #666;
  margin-bottom: 8px;
}

.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.content-tips {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  line-height: 1.4;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.button-group .u-button {
  width: 45%;
}
</style> 